<template>
  <div class="list" ref="listWrapper">
    <div>
      <div class="hot-cities">
        <div class="hot-cts-title">热门城市</div>
        <ul class="clearfix">
          <li v-for="item in computedCities" 
              :key="item.id" 
              :class="item.borderType" 
              @click="handleCityClick(item.name)"
          >
            {{item.name}}
          </li>
        </ul>
      </div>
      <div class="alphabet-menu">
        <div class="alphabet-menu-title">字母排序</div>
        <ul class="clearfix">
          <li v-for="item of letters" 
              :key="item" 
              @click="handleLetterClick">
              {{ item }}
          </li>
        </ul>
      </div>
      <div class="alphabet-list" v-for="(item, key) of cities" 
                                 :key="key"
                                 :ref="key"
                                 >
        <div class="alphabet-list-title">{{ key }}</div>
        <ul class="clearfix">
          <li v-for="childItem in item" 
              :key="childItem.id" 
              @click="handleCityClick(childItem.name)">
              {{ childItem.name }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import { mapMutations } from 'vuex' //引入mapMutations辅助函数，帮我们简化代码


export default {
  name: "CityList",
  props: {
    hotCities: Array,
    cities: Object
  },
  data: function() {
      return {
          letter: '',
      }
  },
  methods: {
      handleLetterClick: function(e) {
        this.letter = e.target.innerText;
      },
      handleCityClick: function(city) {
        //this.$store.dispatch('changeCityName', city)
        this.changeCityName(city);//这一行代替了上一行注释了的代码，因为上面引入了mapMutations辅助函数，第69行那里又定义了mapMutations，所以这里可直接这样写，来代替上面那行代码
        this.$router.push('/')
      },

      ...mapMutations({
        changeCityName: 'changeCityName'//将changeCityName函数映射到了组件当中去
      })
  },
  computed: {
    letters: function() {
        var letters = [];
        for(var i in this.cities) {//es6语法，循环一个对象中的key值
            letters.push(i);
        }
        return letters;
    },
    computedCities: function() {
      var result = [],
        length = this.hotCities.length,
        item;

      for (var i = 0; i < length; i++) {
        var resObj = {};
        item = this.hotCities[i];
        resObj.name = item.name;

        if (item.order === 1) {
          resObj.borderType = "";
        } else if (item.order === 2 || item.order === 3) {
          resObj.borderType = "border-left";
        } else if (item.order % 3 === 1) {
          resObj.borderType = "border-top";
        } else {
          resObj.borderType = "border-topleft";
        }

        result.push(resObj);
      }

      return result;
    }
  },
  watch: {
    letter: function() {
       var tarElement = this.$refs[this.letter][0];
       this.scroll.scrollToElement(tarElement);
    }
  },
  mounted: function() {//js钩子函数，DOM元素全部挂载加载完才会触发
    this.scroll = new BScroll(this.$refs.listWrapper, {click: true});// {click: true}解决better-scroll使click事件失效问题
  },
  activated: function() {
    //document.scrollTo(0, 0);
  }
};
</script>

<style lang="stylus" scoped>
@import '~styles/variables.styl';

div {
  box-sizing: border-box;
}

.clearfix::after {
  display: block;
  content: '';
  clear: both;
}

.list {
  position: absolute;
  top: 0.88rem;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.hot-cities {
  width: 100%;
  height: 4.32rem;
}

.hot-cities .hot-cts-title, .alphabet-menu .alphabet-menu-title, .alphabet-list .alphabet-list-title {
  width: 100%;
  height: 0.72rem;
  line-height: 0.72rem;
  padding: 0 0.2rem;
  font-size: 0.26rem;
  color: $darkTxtColor;
  background-color: #eee;
}

.hot-cities ul li {
  float: left;
  width: 33.3%;
  height: 0.9rem;
  line-height: 0.9rem;
  text-align: center;
}

.alphabet-menu ul {
  height: 4.2rem;
  width: 100%;
  margin: 0.3rem 0;
}

.alphabet-menu ul li {
  float: left;
  width: 16.66%;
  height: 0.9rem;
  line-height: 0.9rem;
  text-align: center;
}

.alphabet-list ul li {
  float: left;
  width: 25%;
  height: 0.9rem;
  line-height: 0.9rem;
  text-align: center;
}
</style>